<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
	<div data-role="page" >
		<div data-role="header">
			<a href="home.html" rel="external" data-role="button" data-icon="back" data-rel="reverse">Back</a> 
			<h1>Add New Contact</h1>
			<a href="#" data-role="button" data-icon="gear">Edit</a>
		</div>

		<div data-role="content">
			<form id="addcontactForm">
				<div id="nameDiv" data-role="fieldcontain">
					<label for="name">Name*: </label>
					<input type="text" id="name" name="name_r">	
				</div>
				<div id="emailDiv" data-role="fieldcontain">
					<label for="email">Email*: </label>
					<input type="email" id="email" name="email_r" placeholder="your email..">
				</div>
				<div id="groupDiv" data-role="fieldcontain">
					<label for="group" id="groupLabel">Group*: </label>
					<select id="groupState" name="group_r" tabindex="2">
						<option value="ZZZ">Please select a group</option>
						<option value="Favorite">Favorite</option>
						<option value="Friend">Friend</option>
					</select> 
				</div>
				<div id="submitDiv" data-role="fieldcontain">
					<input id="submitButton" type="submit" value="Submit" data-inline="true">
				</div>
			</form>
		</div>
		
		<div data-role="footer">
			<h1>Footer</h1>
		</div>
	
		<div id="contentConfirmation" data-role="content">
			<h3>Confirmation page: <br></h3>
			<p id="confirmation">name here!</p>
		</div>

		<div id="page" data-role="content">
			<p></p>
		</div>

		<script>
			var	html = "Name: hihihihihi";
			$("#page div: jqmData(role=p)").append(html);
		</script>

	</div>

	<script type="text/javascript">
			
		$(document).ready(function() {
			$("#contentConfirmation").hide();
		});

		$(document).on("pageinit", function() {

			$("#submitButton").click(function() {
				var nameVar = $('input[name*="_r"]').val();
				$("#contentConfirmation").append("<p>" + nameVar + "</p>");
				$("#contentConfirmation").show();
			});
		});

	</script>

</body>
</html>
